<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="utf-8">    
<title>上传图片demo</title>    
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">    

</head>    

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src = "https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="http://hightech.c2d.me/dingdingbox/api/jsapiConfig?callback=wx.config&debug=true"></script>
<style>
      button{
      		width:100px;
      		height:100px;
      		font-size: 30px;
      }
</style>
<body>
	<button class = 'chooseImage'>选择图片</button>
	<button class = 'uploadImage'>上传图片</button>
	<h4 id="server">mediaId:</h4>
	<img src = 'http://pic.58pic.com/58pic/15/47/81/61K58PICe82_1024.png'  id="image" style="width: 309px;">
</body>

<script type="text/javascript">
			
	var localIds = null;
	var serverId = null;
	wx.ready(function(){
		
		//选择图片
		$('.chooseImage').click(function(){
			wx.chooseImage({
			    count: 1, // 默认9
			    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
			    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
			    success: function (res) {
			        localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片			        			        
			        $('#image').attr('src',localIds[0]);
			    }
			});							
		});
		
		//上传图片
		$('.uploadImage').click(function(){			
			if(localIds[0] == ''  || localIds[0] == null){
				alert("请选择图片！");
			}else{
				
				if(serverId != null){
					alert("你已成功上传,不需重复上传,mediaId为:"+serverId);
				}else{
					wx.uploadImage({
					    localId: localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
					    isShowProgressTips: 1, // 默认为1，显示进度提示
					    success: function (res) {
					        serverId = res.serverId; // 返回图片的服务器端ID
					        $('#server').html("mediaId:"+serverId);
					        
					    	//异步请求抽奖
					    	$.ajax({
					    		url:'/dingdingbox/uploadCaseImage',
					    		type:'get',
					    		data:{ media_id : serverId},
					    		dataType:'json',
					    		success:function(res){    					
							        alert("上传成功,mediaId:"+serverId);
					    		},
					    		error:function(res){			
					    			alert("上传失败,mediaId:"+serverId);
					    		}
					    		
					    	})      							        
					        				        
					    }
					});								
				}
			
			}						
		});
							
	});
</script>
</html>